<template>
	<view class="createSpace" style="padding-bottom: 180rpx;">
		<u-navbar title="创建空间" title-size="36" title-color="#333333" back-icon-size="40"></u-navbar>
		
		<!-- <view v-show="showImage" class="imageWrap">
			<scroll-view scroll-x class="imageBox">
				<view class="image_item"  v-for="(item, index) in imgList" :key="index" @tap="viewImage" :data-url="imgList[index]">
					<image :src="imgList[index]" mode="aspectFill" class="image_item">
						<view class="deletBox" @tap.stop="delImage" :data-index="index"><text>X</text></view>
					</image>
				</view>
			</scroll-view>
		</view> -->
		
		<u-cell-group class="create-space">
			<u-cell-item :arrow="false">
				<view class="title" slot="title">
					空间主图<i class="red">*</i>
				</view>
				<view class="upload">
					<view class="uploadImg" v-if="spaceImgUrl" @click="chooseImage">
						<image :src="spaceImgUrl" mode=""></image>
					</view>
					<view class="uploadImg" v-else @click="chooseImage">
						<u-icon name="camera-fill" size="60" color="#c0c4cc"></u-icon>
						<text>上传图片</text>
					</view>
				</view>
			</u-cell-item>
		</u-cell-group>
		
		<view class="create-space">
			<u-row class="form-item">
				<u-col span="12">
					<view class="field-icon">空间名称<i class="red">*</i></view>
				</u-col>
				<u-col span="12">
					<u-input type="text" v-model="spaceName" placeholder="请填写空间名称，不超过12个字" :border="true" />
				</u-col>
			</u-row>
			<u-field @click="showAction" v-model="accessName" 
			:disabled="true" style="width: 100%;" placeholder="请选择"
			right-icon="arrow-right" :border-bottom="true" input-align="right">
				<view slot="icon" class="field-icon">访问权限<i class="red">*</i></view>
			</u-field>
			<u-action-sheet @click="clickItem" :list="accessList" v-model="show"></u-action-sheet>
			
			<u-row class="form-item">
				<u-col span="12">
					<view class="field-icon">主题标签<i class="red">*</i></view>
				</u-col>
				<u-col span="12">
					<view class="tags_list">
						<template v-if="labelList.length > 0">
							<u-tag v-for="(item,index) in labelList" :key="index" :text="item" 
								type="success" bg-color="#FFFAD3" border-color="#FFFAD3" 
								color="#FF7B02" closeable shape="circle" @close="tagClose" />
						</template>
						<view class="add_tags" @click="showTag = true">
							<u-icon name="plus"></u-icon>标签
						</view>
					</view>
				</u-col>
			</u-row>
			
			<u-row class="form-item noBorder">
				<u-col span="12">
					<view class="field-icon">空间简介<i class="red">*</i></view>
				</u-col>
				<u-col span="12">
					<u-input type="textarea" v-model="spaceBriefIntroduction" maxlength="100" height="250" placeholder="请填写文字简介，不超过100个字" :border="true" />
				</u-col>
			</u-row>
		</view>
		
		<u-cell-group class="create-space space-tips">
			<u-cell-item :arrow="false">
				<view class="title section" slot="title">
					所在位置
					<view class="num address_update" @click="resetAddress">
						<i class="icon_update"></i>刷新
					</view>
				</view>
				<view class="tips" style="display: flex; align-items: center;" slot="label">
					<i class="icon_address"></i>{{ addressInfo.address }}
				</view>
			</u-cell-item>
		</u-cell-group>
		
		<u-cell-group class="create-space space-tips">
			<u-cell-item :arrow="false">
				<view class="title section" slot="title">
					消耗金币
					<view class="num" style="color: #FF6969;">-30</view>
				</view>
				<view class="tips" slot="label">
					<view class="coin_suff">
						<view class="cst">
							可用金币 <text style="color: #FF6969;" v-if="userInfo.availableGoldCoinCount < 30">(金币不足)</text>
						</view>
						<view class="coin_usable">
							{{ userInfo.availableGoldCoinCount }}
						</view>
					</view>
					温馨提示：每日打卡签到、邀请新用户，可获得金币奖励！
				</view>
			</u-cell-item>
		</u-cell-group>
		
		<u-cell-group class="create-space space-tips">
			<u-cell-item :arrow="false">
				<view class="title section" slot="title">
					活力值
					<view class="num" style="color: #FFCB52;">+30</view>
				</view>
				<view class="tips" slot="label">
					温馨提示：泡泡空间初始活力值为30，每天自然消耗1个活
					力值，当活力值为0时，空间不可见。在空间中发布泡泡、
					进行评论、点赞和分享，均可以增加不同数量的活力值，
					详情见规则说明。
				</view>
			</u-cell-item>
		</u-cell-group>
		
		
		<view class="coin-btn">
			<button type="default" :disabled="btnDisable" class="recharge_coin" @click="createSpace">完成创建</button>
		</view>
		
		<u-popup v-model="showTag" mode="center" closeable width="640rpx" border-radius="16" close-icon-size="40">
		    <tag-model v-if="showTag" @close="showTag = false" @addTag="addTag"></tag-model>
		</u-popup>
		
		<u-popup v-model="showSpace" mode="center" closeable @close="onSpaceClose" width="640rpx" border-radius="16" close-icon-size="40">
			<space-model v-if="showSpace" :spaceDetail="spaceDetail" @close="onSpaceClose"></space-model>
		</u-popup>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import location from '@/common/js/location.js'
import storage from '@/common/js/storage';
import tagModel from './modal/tag.vue'
import spaceModel from './modal/space.vue'
export default {
	mixins: [location],
	data() {
		return {
			accessName: '',
			accessList: [],
			show: false,
			mobile: null,
			showTag: false,
			accessRightsId: 0,
			labelList: [],
			// address: '',
			spaceBriefIntroduction: null,
			spaceImgUrl: null,
			spaceName: null,
			showSpace: false,
			spaceDetail: {}
		}
	},
	components: {
		tagModel,
		spaceModel
	},
	computed: {
		...mapState(["addressInfo", "dicTypeList", 'userInfo']),
		btnDisable() {
			if(this.spaceImgUrl && this.spaceName && this.accessName && this.labelList.length > 0 && this.spaceBriefIntroduction) {
				return false
			} else {
				return true
			}
		}
	},
	onLoad() {
		let dicTypeId = 0
		let dicTypeList = this.dicTypeList || []
		dicTypeList.forEach(item => {
			if(item.id == 9) {
				dicTypeId = item.dicTypeId
			}
		})
		this.$u.get('/public/dict/queryAppDicValueAndIdList', { dicTypeId: dicTypeId }).then(res => {
			let result = res || []
			result.forEach(item => {
				this.accessList.push({
					text: item.value,
					id: item.id
				})
			})
		})
	},
	methods: {
		onSpaceClose() {
			this.showSpace = false
			this.$u.route({
				type: 'switchTab',
				url: '/pages/tabbar/home'
			})
		},
		resetAddress() {
			// 刷新地图
			uni.showLoading({
			    title: '刷新中'
			});
			let _this = this
			setTimeout(() => {
				// _this.getAddressInfo(() => {
				// 	uni.hideLoading()
				// })
				_this.geo((res) => {
					let tempRes = res
					_this.getAddressInfo({
						latitude: tempRes.latitude,
						longitude: tempRes.longitude
					}, () => {
						uni.hideLoading()
					})
				})
			}, 1000)
		},
		createSpace() {
			if (this.userInfo.availableGoldCoinCount < 30) {
				uni.showToast({
				    title: '金币不足',
				    icon: 'none',
				    duration: 3000,
				});
				return
			}
			let params = {
				lat: this.addressInfo.lat,
				lng: this.addressInfo.lng,
				accessRightsId: this.accessRightsId,
				address: this.addressInfo.address,
				spaceName: this.spaceName,
				spaceImgUrl: this.spaceImgUrl,
				labelList: this.labelList,
				spaceBriefIntroduction: this.spaceBriefIntroduction
			}
			this.$u.post('/paopao/mini/space/createSpace', params).then(res => {
				console.log(res)
				this.showSpace = true
				this.spaceDetail = params
			})
		},
		addTag(value) {
			console.log(value)
			this.labelList.push(value)
		},
		tagClose(index) {
			
			this.labelList.splice(index, 1)
		},
		// 选择图片
		chooseImage() {
			uni.chooseImage({
				count: 3, //一次可以选择的数量
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], //从相册或手机选择
				success: res => {
					let filePath = res.tempFilePaths[0]
					this.select(filePath)
				}
			})
		},
		// 获取上传状态
		select(filePath){
			let _this = this
			console.log(this.imageValue)
			uni.getFileSystemManager().readFile({
				filePath: filePath, //选择图片返回的相对路径
				encoding: 'base64', //编码格式
				success:(res) =>{
					let baseImg = 'data:image/png;base64,' + res.data
					this.$u.post('/public/file/uploadBase64', {
						base64: baseImg,
						fileName: 'spaceHeadeImg'
					}).then(res => {
						this.spaceImgUrl = res.url
					})
				}
			})
		},
		showAction() {
			this.show = true;
		},
		clickItem(index) {
			let accessObj = this.accessList[index]
			this.accessName = accessObj.text;
			this.accessRightsId = accessObj.id;
			
		}
	}
}
</script>

<style lang="less" scoped>
@import url("../../common/css/var.less");
.createSpace {
	background-color: #F7F7F7;
}
.red {
	color: #FF6969;
}
.create-space {
	display: flex;
	align-items: center;
	flex-direction: column;
	margin: 32rpx 32rpx 0;
	border-radius: 32rpx;
	overflow: hidden;
	background-color: #FFFFFF;
	.title {
		display: flex;
		align-items: center;
		color: @mText;
		&.section {
			justify-content: space-between;
			font-size: 32rpx;
		}
	}
	
	/deep/.u-field {
		padding: 32rpx 0;
		margin: 0 32rpx;
		border-bottom: 2rpx solid #E6E6E6;
	}
	.form-item {
		padding: 32rpx 32rpx 0;
		width: calc(100% - 64rpx);
		&.noBorder /deep/.u-input--border {
			border-bottom: 0;
		}
	}
	.tags_list {
		display: flex; 
		align-items: center; 
		flex-wrap: wrap;
		padding-top: 32rpx;
		border-bottom: 2rpx solid #E6E6E6;
	}
	.add_tags {
		width: 108rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2rpx solid #E7E7E7;
		border-radius: 24rpx;
		font-size: 24rpx;
		color: @mText;
		margin-bottom: 32rpx;
		u-icon {
			color: @orangeColor;
			margin-right: 8rpx;
		}
	}
	u-tag {
		margin-bottom: 32rpx;
		margin-right: 32rpx;
	}
	/deep/.u-input--border {
		border: 0;
		border-bottom: 2rpx solid #E6E6E6;
		padding: 0 !important;
	}
}
.space-tips {
	/deep/.u-cell_title {
		width: 100% !important;
	}
}
.tips {
	font-size: 24rpx;
}
.coin_suff {
	font-size: 32rpx;
	color: @mText;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 32rpx;
	padding-bottom: 18rpx;
	border-top: 2rpx solid #E6E6E6;
	margin-top: 32rpx;
}
.upload {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	.uploadImg {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 128rpx;
		height: 128rpx;
		border: 2rpx solid #E6E6E6;
		background-color: #F7F7F7;
		border-radius: 16rpx;
		text {
			padding-top: 4rpx;
			font-size: 24rpx;
			color: #999
		}
		image {
			width: 100%;
			height: 100%;
			border-radius: 16rpx;
		}
	}
}
/deep/.fild-body  {
	justify-content: flex-end;
}

.field-icon {
	display: flex;
	align-content: center;
	color: @mText;
}
.coin-btn {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 24rpx 32rpx;
	border-top: 2rpx solid #E6E6E6;
	background-color: #FFFFFF;
	.recharge_coin {
		line-height: 96rpx;
		background: #FF7B02 !important;
		box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.06);
		border-radius: 48rpx;
		color: #FFFFFF;
		font-size: 36rpx;
		&[disabled] {
			background: #CCCCCC !important;
			color: #FCFCFC;
		}
	}
}
.address_update {
	display: flex;
	align-items: center;
	font-size: 28rpx;
	color: @tText;
	.icon_update {
		width: 40rpx;
		height: 40rpx;
		display: inline-block;
		background: url('../../static/header/icon_update.png') no-repeat center;
		background-size: contain;
		margin-right: 8rpx;
	}
}
.icon_address {
	width: 40rpx;
	height: 40rpx;
	display: inline-block;
	background: url(../../static/header/icon_point.png) no-repeat center;
	background-size: contain;
}
</style>
